<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文都云协同</title>
    <link href="../../css/bootstrap.css" rel="stylesheet">
    <link href="../../css/font-awesome.min.css" rel="stylesheet">
    <style>
        #app {
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="app">

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">请假</li>
                <li class="breadcrumb-item active">请假申请和销假</li>
            </ol>
        </nav>

        <form class="row row-cols-lg-auto g-3 align-items-center mb-3">
            <div class="col-12">
                <div class="input-group">
                    <div class="input-group-text">状态</div>
                    <select class="form-select" v-model="query.l_status" @change="goPage(1)">
                        <option value="">全部</option>
                        <option value="0">未提交</option>
                        <option value="1">待审批</option>
                        <option value="2">已驳回</option>
                        <option value="3">待销假</option>
                        <option value="4">已销假</option>
                    </select>
                </div>
            </div>
            
            <div class="col-12">
                <div class="input-group">
                    <div class="input-group-text">请假理由</div>
                    <input @keyup="goPage(1)" type="text" class="form-control" v-model="query.l_cause">
                </div>
            </div>

            <div class="col-12">
                <div class="input-group">
                    <div class="input-group-text">请假时间段</div>
                    <input type="date" class="form-control" placeholder="开始日期" v-model="query.l_data_0">
                    <span class="input-group-text">至</span>
                    <input type="date" class="form-control" placeholder="结束日期" v-model="query.l_data_1">
                </div>
            </div>

            <div class="col-12">
                <button type="button" class="btn btn-primary" @click="goPage(1)"> <i class="fa fa-search"></i> 查询</button>
            </div>
        </form>

        
        <button  class="btn btn-primary" @click="openAdd" >新建</button>
        &nbsp;
        <button  class="btn btn-danger" @click="execMultiDel" >删除</button>

        <div style="margin-top:10px;padding:20px;height:400px;overflow: auto;border:1px solid #DDDDDD;box-shadow: 0px 0px 10px 0px #DDDDDD;">
            <table class="table">
                <thead>
                    <tr>
                        <th>选择</th>
                        <th>请假申请人</th>
                        <th>请假时段</th>
                        <th>请假理由</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in page.list" :key="item.e_id">
                        <td><input v-model="lids" type="checkbox" :value="item.l_id"></td>
                        
                        <td>
                            {{item.e_id}} | {{item.e_name}}
                        </td>
                        <td>
                            {{item.l_start}} ~ {{item.l_end}}
                        </td>
                        <td>{{item.l_cause}}</td>
                        <td>{{item.statusName}}</td>
                        
                        <td>
                            <button type="button" class="btn btn-link" v-if="item.l_status == 0" >修改</button>
                            <button type="button" class="btn btn-link" v-if="item.l_status == 0" >删除</button>
                            <button type="button" class="btn btn-link" v-if="item.l_status == 0" @click="commitLeave(item.l_id)" >提交</button>
                            <button type="button" class="btn btn-link" v-if="item.l_status == 3">销假</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <nav style="padding-top:10px;border-top:1px solid #DDDDDD;">
            <ul class="pagination">
                <li class="page-item" style="flex:none;display: flex;align-items: center;">
                    <div style="flex:none;padding-right:3px;">每页</div>
                    <select class="form-select form-select-sm" v-model="query.pageSize" @change="goPage(1)">

                        <option v-for="num in pageList" :value="num">{{num}}</option>

                    </select>
                    <div style="flex:none;padding-left:3px;padding-right:10px;">条记录</div>
                </li>
                <li class="page-item"><a class="page-link" href="#" @click="goPage(page.first)">首页</a></li>
                <li class="page-item"><a class="page-link" href="#" @click="goPage(page.pre)">上页</a></li>
                <li class="page-item"><a class="page-link" href="#" @click="goPage(page.next)">下页</a></li>
                <li class="page-item"><a class="page-link" href="#" @click="goPage(page.last)">尾页</a></li>
                <li class="page-item" style="flex:1;display: flex;align-items: center;justify-content: flex-end;">

                    当前第<input type="number" v-model="query.pageNum" @change="goPage(query.pageNum)"
                        style="margin:0px 2px;outline: none;width:60px;border:1px solid #DDDDDD;border-radius:5px;text-align: center;" />页{{page.currSize}}条记录，共{{page.pgTotal}}页{{page.total}}条记录

                </li>
            </ul>
        </nav>

        <!--新增窗口-->
        <div id="add-win" style="display:none;padding:15px;">

            <div class="mb-5">
                <div class="input-group">
                    <div class="input-group-text">请假时段</div>
                    <input type="datetime-local" class="form-control" placeholder="开始时间" v-model="addData.l_start">
                    <span class="input-group-text">至</span>
                    <input type="datetime-local" class="form-control" placeholder="结束时间" v-model="addData.l_end">
                </div>
            </div>

            <div class="mb-5">
                <label class="form-label">请假事由</label>
                <textarea class="form-control" rows="5" v-model="addData.l_cause"></textarea>
            </div>

            <button class="btn btn-primary btn-lg" @click="execAdd" >保存</button>
              
        </div>

        <!--修改窗口-->
        <div id="upd-win" style="display:none;padding:15px;">
            
            <div class="mb-5">
                <div class="input-group">
                    <div class="input-group-text">请假时段</div>
                    <input type="datetime-local"  class="form-control" placeholder="开始时间"  >
                    <span class="input-group-text">至</span>
                    <input type="datetime-local" class="form-control" placeholder="结束时间" >
                </div>
            </div>

            <div class="mb-5">
                <label class="form-label">请假事由</label>
                <textarea class="form-control" rows="5" v-model="addData.l_cause"></textarea>
            </div>

            <button class="btn btn-primary btn-lg" >提交</button>
              
        </div>

    </div>

    <script src="../../layer/jquery-3.6.0.min.js"></script>
    <script src="../../layer/layer.js"></script>

    <script src="../../js/bootstrap.bundle.min.js"></script>
    <script src="../../js/vue.global.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/wendu.js"></script>


    <script>
        const app = {
            setup() {

                //定义查询条件
                const query = Vue.reactive({
                    pageNum: 1,//请求页码
                    pageSize: 5,//请求每页记录数
                    l_status:'',
                    l_data_0:'',
                    l_data_1:''
                });

                //分页数据
                const page = Vue.ref({
                    list: [],
                    current: 1,
                    pageSize: 5
                });

                const pageList = Vue.ref([3, 5, 10, 15, 20, 30, 100]);//每页记录数



                
                const getPage = () => {
                    req(ajax.get('/leave/apprev/app', { params: query }), result => {
                        //empList.value = result.data;
                        page.value = result.data;

                        //根据回送数据修正query
                        query.pageNum = page.value.current;
                        query.pageSize = page.value.pageSize;
                    })
                };

                //根据请求页码和每页记录数获取分页数据
                const goPage = (pageNum, pageSize) => {
                    if (!pageNum) query.pageNum = 1;
                    else {
                        query.pageNum = pageNum;
                        if (pageSize) query.pageSize = pageSize;
                    }
                    getPage();
                };


                goPage(1);

                


                //新增

                const addData = Vue.reactive({
                    l_start:'',
                    l_end:'',
                    l_cause:''
                });

                let addIdx = null;//新增窗口的索引号
                const openAdd = ()=>{

                    addData.l_start = '';
                    addData.l_end = '';
                    addData.l_cause = '';

                    addIdx = layer.open({
                        type: 1,
                        title:'新建请假条',
                        content: $('#add-win'), 
                        area: ['600px', '480px']
                    });
                };

                const execAdd = ()=>{
                    req(ajax.post('/leave/apprev/app',addData),result=>{
                        //刷新数据
                        goPage(1);
                        //关闭新增窗口
                        layer.close(addIdx);
                        layer.msg('新增请假条成功！',{icon:1});
                    });
                };

                //修改
                const updData = Vue.reactive({
                    
                });
                let updIdx = null;
                const openUpd = (record)=>{                    

                    updIdx = layer.open({
                        type: 1,
                        title:'修改请假条',
                        content: $('#upd-win'), 
                        area: ['600px', '480px']
                    });
                };

                const execUpd = ()=>{
                    req(ajax.put('',updData),result=>{
                        //刷新数据
                        goPage(page.value.current);//展示当前页
                        //关闭新增窗口
                        layer.close(updIdx);
                        layer.msg('修改请假条成功！',{icon:1});
                    });
                };

                
                //单删除
                const execDel = (eid)=>{
                    req(ajax.delete(''+eid),result=>{
                        //刷新数据
                        goPage(page.value.current);//展示当前页
                        
                        layer.msg('删除请假条成功！',{icon:1});
                    });
                }

                //多删除
                const lids = Vue.ref([]);
                const execMultiDel = ()=>{

                    if(lids.value.length == 0){
                        layer.msg('您没有选择任何数据！',{icon:7});
                        return;
                    }

                    layer.confirm('您确实要删除选中的数据吗?', {icon: 3, title:'提示'}, function(index){
                        //do something
                        req(ajax.delete('',{data:lids.value}),result=>{
                            lids.value = [];
                            //刷新数据
                            goPage(page.value.current);//展示当前页
                            
                            layer.msg('删除请假条成功！',{icon:1});
                        });
                        layer.close(index);
                    });

                   
                };

                //提交
                const commitLeave = (l_id)=>{
                    req(ajax.put('/leave/apprev/app/commit/'+l_id),result=>{
                        //刷新数据
                        goPage(page.value.current);//展示当前页
                        
                        layer.msg('提交请假条成功！',{icon:1});
                    });
                };


                

                return {
                    query,                    
                    page,//分页数据
                    pageList,
                    getPage,
                    goPage,

                    //新增
                    addData,
                    openAdd,
                    execAdd,

                    //修改
                    updData,
                    openUpd,
                    execUpd,

                    //删除
                    execDel,

                    //多删除
                    lids,
                    execMultiDel,

                    //提交
                    commitLeave

                    
                };
            }
        };
        Vue.createApp(app).mount('#app');
    </script>

</body>

</html>